<template>
  <view class="login-content">
    <u-form :model="formData" ref="formRef">
      <u-form-item prop="phone">
        <u-icon
          class="icon"
          :size="32"
          name="/static/images/icon/icon_mobile.png"
        />
        <u-input
          class="input-width"
          v-model="formData.phone"
          :border="false"
          placeholder="请输入手机号码"
        />
      </u-form-item>
      <u-form-item prop="smsCode">
        <u-icon
          class="icon"
          :size="32"
          name="/static/images/icon/icon_code.png"
        />
        <u-input
          class="input-width"
          v-model="formData.smsCode"
          placeholder="请输入验证码"
          :border="false"
        />
        <view class="right-btn" @click="sendSms">
          <u-verification-code
            ref="uCodeRef"
            :seconds="60"
            @change="codeChange"
            change-text="x秒"
          />
          <text :class="formData.phone ? 'text-primary' : 'text-muted'">
            {{ codeTips }}
          </text>
        </view>
      </u-form-item>
    </u-form>
    <view class="btn" @click="handleLogin"> 登 录 </view>
    <view class="agreement-box">
      <u-checkbox v-model="isCheckAgreement" shape="circle">
        <view class="content">
          已阅读并同意
          <view @click.stop>
            <navigator
              class="link"
              hover-class="none"
              url="/packages/pages/agreement/index?type=user"
            >
              《用户协议》
            </navigator>
          </view>
        </view>
      </u-checkbox>
    </view>
    <agreement-modal
      v-model:modalShow="modalShow"
      @change:confirm-modal="confirmModal"
    ></agreement-modal>

    <LoginWx
      ref="wxOne"
      :Check="isCheckAgreement"
      :modalShow="modalShow"
      @change:check="handleCheck"
    />
  </view>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
import { onReady, onShow } from "@dcloudio/uni-app";
import { smsSend } from "@/api/app";
import { userStore } from "@/store/user/user";
import LoginWx from "../login-wx/index.vue";
const useuserStore = userStore();
const formRef = ref();
const wxOne = ref();
const uCodeRef = shallowRef();
const codeTips = ref("");
const isCheckAgreement = ref(false);
const modalShow = ref(false);
const formData = reactive({
  phone: "",
  smsCode: "",
});
const rules = reactive({
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: ["change", "blur"],
    },
  ],
  smsCode: [
    { required: true, message: "请输入验证码", trigger: ["change", "blur"] },
  ],
});

const sendSms = () => {
  if (!formData.phone) return;
  if (uCodeRef.value?.canGetCode) {
    uni.showLoading({
      title: "正在发送...",
    });
    smsSend({
      phone: formData.phone,
    }).then((res) => {
      console.log(res, 888777);
      uni.hideLoading();
      uni.$u.toast("发送成功");
      uCodeRef.value?.start();
    });
  }
};
const codeChange = (text) => {
  codeTips.value = text;
};
const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (!isCheckAgreement.value) {
        modalShow.value = true;
        return;
      }
      loginFun();
    }
  });
};
const handleCheck = () => {
  if (!isCheckAgreement.value) {
    modalShow.value = true;
    return;
  }
};

/**
 * @description: 登录操作
 */
const loginFun = async () => {
  uni.showLoading({
    title: "正在登录中...",
  });
  const params = {
    user_type: "c",
    grant_type: "sms",
    invite_code: "",
    phone: formData.phone,
    phoneCode: formData.smsCode,
    type: "phone",
  };
  await useuserStore.login(params);
  uni.hideLoading();
  uni.$u.toast("登录成功");
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
const confirmModal = () => {
  isCheckAgreement.value = true;
  loginFun();
};
onReady(() => {
  formRef.value.setRules(rules);
});
</script>

<style lang="scss" scoped>
.login-content {
  padding-top: 20rpx;
  height: 100vh;
  width: 100%;
  position: relative;
  .login-logo {
    padding-top: 30%;
    padding-bottom: 20%;
    display: flex;
    justify-content: center;
  }
}
.operation {
  color: $u-type-primary;
  text-align: right;
  margin-top: 30rpx;
}
.operation-center {
  text-align: center;
  margin-top: 40rpx;
}
.icon {
  margin-right: 30rpx;
}
.right-btn {
  width: 300rpx;
  color: $u-type-primary;
  text-align: center;
}
.btn {
  height: 87rpx;
  margin-top: 40rpx;
  background: linear-gradient(131deg, #009bfc 0%, #00eadb 100%);
  border-radius: 48rpx;
  line-height: 87rpx;
  text-align: center;
  color: white;
}
.agreement-box {
  margin-top: 30rpx;
  .content {
    display: flex;
    .link {
      color: $u-type-primary;
    }
  }
}
.other {
  width: 100%;
  padding-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone {
  border: none;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  text-align: center;
}
</style>
